<template>
  <div class="table-search-page">
    <a-card class="g-mt-10" :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" :form="form" >
          <a-row :gutter="12">
            <a-col :md="12" :lg="6" :sm="12" style="padding: 0 4px;">
              <a-form-item label="登记时间">
                <a-range-picker v-decorator="['time']" style="width: 100%;" >
                  <a-icon slot="suffixIcon" type="calendar"/>
                </a-range-picker>
              </a-form-item>
            </a-col>
            <a-col :md="2" :lg="4" :sm="12">
              <div class="table-page-search-submitButtons g-flex" style="margin-bottom: 4px;">
                <a-button  type="primary" @click="clickSearch">查询</a-button>
                <a-button style="margin-left: 8px" @click="clickReset">重置</a-button>
              </div>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <a-card :bordered="false" class="settlement-form-table">
     <a-table
        size="small"
        :loading="loading"
        :rowKey="(record,index)=> index"
        :columns="columns"
        :dataSource="dataSource"
        :bordered="true"
        style="margin-top:10px;"
        @change="handleTableChange"
        :pagination="pagination"
     >
        <!--序号-->
        <template slot="index" slot-scope="text,record,index">
          <span>{{(pagination.current-1)*pagination.pageSize+(index+1)}}</span>
        </template>
        <!--客户卡号-->
        <template slot="cardNo" slot-scope="text,record">
          <a class="g-f-14" @click="toCustomerDetails(text,record)">{{ text }}</a>
        </template>
        <template slot="action" slot-scope="text,record">
          <a-button class="g-bt-pad-0" type="link" :disabled="hasNoDetails(record)" @click="openDrawer(record)" >详情</a-button>
        </template>
      </a-table>
    </a-card>

    <!--项目抽屉--弹窗-->
    <item-drawer ref="itemDrawer"  />
  </div>
</template>

<script>
import {
  financeChannelList
} from '@/api/modular/main/customer/cashier'
import { SuperTable } from '@/components'
import itemDrawer from '@/views/Cashier/channelReport/itemDrawer'
import moment from 'moment'
import {Timeline} from 'ant-design-vue'
import { getConsultItemList } from '@/api/modular/main/customer/customerScene'

export default {
  components: {
    SuperTable,
    itemDrawer,
    [Timeline.Item.name]: Timeline.Item
  },
  computed: {
    
  },
  data() {
    return {
      dataSource:[],
      form: this.$form.createForm(this),
      customerState: [],//客户状态
      customerLevel: [],//客户等级
      advanced: false, // 高级搜索 展开/关闭
      disabled: true, //是否禁用新增按钮
      current_row_record: {},
      columns: [
        { title: '日期', align:'center', dataIndex: 'rpDate', ellipsis: true, },
        { title: '金额  ', align:'center', dataIndex: 'amt', ellipsis: true, },
        { title: '操作', align:'center', scopedSlots: { customRender: 'action' }, width: 80 }
      ],
      data: [],
      pagination: {
        current: 1,//当前页
        pageSize: 10,//当前页数
        total: 0,//总条数
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '20', '30'],//这里注意只能是字符串，不能是数字
        showTotal: total => `共有 ${total} 条数据`//分页中显示总的数据
      },
      // 查询参数
      queryParam: {
        pageNum: 1,//第几页
        pageSize: 10,//每页中显示数据的条数
      },
      loading: true, //加载状态,
      current_row_index: '',
      customerFeedback: {},
      allHisUser: {}, //回访人对象
      currentActiveKey: 1,
      // 日结显示
      settlementVisible: false,
      // 时间
      gettime:'',
      // 图片
      imgVisible: false,
      imgSrc:'',
      settlementLoading: false,
      settlementLoadingText: '开始结算中', // 日结loading
      indicator: <a-icon type="loading" spin />,
      loadingTextArr: [],
      tegistrationTime: []
    }
  },
  created() {
    this.getlList()
  },
  methods: {
    //列表
    getlList(){
      this.loading=true
      financeChannelList(this.queryParam).then(res=>{
        this.dataSource=res.rows
        this.pagination.total = parseInt(res.total)
        this.loading=false
      })
    },
    //是否有数据
    hasNoDetails(record){
      if(!record.Details|| record.Details.length<=0){
        return true
      }
      return false
    },
    timeSearchChange(date,day){
      console.log(day)
      this.tegistrationTime = day
    },
    // tabs 切换
    tabsChange(tab,index){
      this.queryParam.pageNum = 1
      this.queryParam.pageSize = 10
      this.queryParam.current = 1
      this.queryParam = Object.assign({},this.queryParam)
    },

    moment,

    //点击查询-高级搜索
    clickSearch() { 
      const form_values = this.form.getFieldsValue()
      const time = form_values.time
      form_values.beginTime = (time && time.length) ? moment(time[0]).format('YYYY-MM-DD') :undefined
      form_values.endTime =(time && time.length) ? moment(time[1]).format('YYYY-MM-DD') :undefined
      form_values.time = undefined
      this.queryParam = Object.assign(this.queryParam,form_values)
      this.getlList()
    },
    clickReset() {
      this.form.resetFields()
      this.queryParam.beginTime=undefined
      this.queryParam.endTime=undefined
    },

    openDrawer(record){
      this.$refs.itemDrawer.show(record)
    },
     
    //点击查看客户详情
    toCustomerDetails(text, record) {
      this.$router.push({
        path: 'customer_details', query: {
          id: record.customerId,
          card_no: record.cardNo,
          customerName:record.customerName
        }
      })
    },
    /**
     分页
     * */
    handleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current
      this.pagination.pageSize = pagination.pageSize
      this.queryParam.pageNum=pagination.current
      this.queryParam.pageSize = pagination.pageSize
      this.getlList()
    }

  }

}
</script>

<style lang="less" scoped>

.table-operator {
  margin-bottom: 18px;
}

button {
  margin-right: 8px;
  margin-bottom: 2px;
}

.currentRowClass {
  background: #e6f7ff;
}

/deep/ .ant-tabs-bar {
  // border-bottom: none;
  border-bottom: 1px solid #e8e8e8;
}

/deep/ .ant-badge-count, .ant-badge-dot, .ant-badge .ant-scroll-number-custom-component {
  right: -10px;
}
/deep/ .model-loading-box{
  .ant-modal-body{
    position: relative;
  }
}
.settlement-loading-style{
  font-weight: bold;
  color: #3399ff;
  position: absolute;
  top: 80px;
  width: 100%;
  margin-left: -24px;
  font-size: 18px;
  background-color: #fff;
  min-height: 146px;
  z-index: 10;

  .settlement-loading-style-timeline{
    width: 300px;
    margin: 0 auto;
    .ant-timeline-item-content{
      font-size: 17px;
      line-height: 26px;
      margin-left: 25px;
    }
  }
}
/deep/ .settlement-form-table{ 
  .ant-table-small.ant-table-bordered .ant-table-fixed-right{
    border-left: 0 !important;
    border-right: 0 !important;
  }
}

</style>